<template>
	<view>
		<view class="box">
			<view class="" style="padding: 30rpx;font-weight: 600;font-size: 34rpx;">
				您对师傅满意吗？
			</view>
			<view class="ava">
				<image src="https://dg.fuliaoxx.com/imgs/ava.png" mode=""></image>
				<view class=""
					style="height: 100rpx;flex-direction: column;justify-content: space-evenly;display: flex;">
					<view class="">
						{{info.nickname || '--'}}
					</view>
					<view class="" style="color: #848587;font-size: 24rpx;">
						{{info.servi_time || '--'}}完成
					</view>
				</view>
			</view>
			<view class="pf">
				评分
				<view class="" style="margin: 0 10rpx;">
					<up-rate :count="5" v-model="value"></up-rate>

				</view>
				<view class="" style="font-weight: 600;">
					{{(value).toFixed(2)}}
				</view>
			</view>
			<view class="" style="padding-left: 20rpx;">
				<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="3">
					<view class=""
						style="display: flex;flex-direction: column;align-items: center;background-color: #F6F6F6;width:calc(100vw - 100rpx);padding: 20rpx 0;border-radius: 20rpx;">
						<up-icon name="camera" size="26"></up-icon>
						<view class="" style="margin-top: 6rpx;color: #727272;font-size: 24rpx;">
							添加照片
						</view>
					</view>
				</up-upload>
			</view>
			<view class="" style="margin: 20rpx;">
				<up-textarea v-model="value1" placeholder="觉得师傅怎么样？态度如何~" border="none"></up-textarea>
			</view>
		</view>
		<view class="btn" @click="sub">
			发布评价
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/utils/base.js'
	export default {
		data() {
			return {
				value: 5,
				value1: "",

				fileList1: [],
				info: {

				}
			}
		},
		onLoad(opt) {
			uni.$get({
				url: '/api/Ordersystem/orderdetial',
				data: {
					id: opt.id
				}
			}).then(res => {
				this.info = res.data;
			})
		},
		methods: {
			sub() {
				if (!this.value1) {
					uni.showToast({
						icon: "none",
						title: "请填写评价内容"
					})
					return
				}
				// if (this.fileList1.length == 0) {
				// 	uni.showToast({
				// 		icon: "none",
				// 		title: "请上传评价图片"
				// 	})
				// 	return
				// }
				let imgs = "";
				if (this.fileList1.length > 0) {
					imgs = this.fileList1.map(item => item.url).join(",");
				}
				uni.showLoading({
					mask: true
				})
				uni.$post({
					url: '/api/Ordersystem/addcomment',
					data: {
						oid: this.info.id,
						pj_score: this.value,
						pj_text: this.value1,
						pj_img: imgs
					}
				}).then(res => {
					uni.showToast({
						icon: "none",
						title: res.msg
					})
					setTimeout(() => {
						uni.hideLoading()
						if (res.code == 1) {
							uni.navigateBack()
						}
					}, 1000)
				})

			},
			async afterRead(event) {
				let that = this;
				console.log(event)
				uni.uploadFile({
					url: baseUrl + '/api/Common/upload', // 仅为示例，非真实的接口地址
					filePath: event.file.url,
					name: 'file',
					header: {
						token: uni.getStorageSync('user').token
					},
					success: (result) => {
						let js1 = JSON.parse(result.data);
						console.log(js1)
						uni.showToast({
							icon: "none",
							title: js1.msg
						})
						that.fileList1.push({
							url: js1.data.fullurl
						})
						console.log(that.fileList1)
					},
				});
			},
			deletePic(e) {
				this.fileList1.splice(e.index, 1)
			},

		}
	}
</script>
<style>
	page {
		height: 100%;
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	:deep .box {
		.u-textarea {
			background-color: #F6F6F6;
		}
	}

	.box {
		background-color: white;
		margin: 30rpx;
		border-radius: 20rpx;
		padding-bottom: 1rpx;
	}

	.btn {
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		width: calc(100vw - 60rpx);
		background-color: #0D8474;
		text-align: center;
		color: white;
		border-radius: 100px;
		padding: 30rpx;
	}

	.ava {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-top: 1rpx solid #E9EAEC;
		border-bottom: 1rpx solid #E9EAEC;

		image {
			width: 100rpx;
			height: 100rpx;
			margin-right: 16rpx;
		}
	}

	.pf {
		display: flex;
		align-items: center;
		padding: 30rpx;

	}
</style>